<template>
  <div class="gameshow">
    <div class="showbox">
      <div class="showbox-top">
        <div>
          <img :src="list.giLogo" alt="" />
        </div>
        <div>{{ list.giName }}</div>
        <div>{{ list.giviews }} 热度</div>
      </div>

      <div class="showbox-bottom">
        <div>{{ list.giIntroduce }}</div>
        <div>
          <span
            ><img
              v-for="items in xing"
              src="../../../assets/img/xingsvg.svg"
              alt=""
              :key="items"
          /></span>

          <span>
            <img
              v-for="items in nxing"
              src="../../../assets/img/nxing.svg"
              alt=""
              :key="items"
            />
          </span>

          <div>{{ list.giScore }}</div>
        </div>
        <div>
          <span>{{ list.gtName }}</span>
        </div>
        <div @click="changSou">
          <img v-if="states" src="../../../assets/img/noshou.svg" alt="" />
          <img v-else src="../../../assets/img/shou.svg" alt="" />
          <span> 收藏 </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { updatedShou } from "../../../network/userUpdate";
import { showGameMessage } from "../../../network/showGame";

export default {
  name: "GameShow",
  data() {
    return {
      xing: "",
      nxing: "",
      shou: "",
      gid: "",
      list: "",
      states: true,
      giScore: "",
    };
  },
  created() {
    this.getXing();
  },
  methods: {
    getXing() {
      this.gid = window.location.pathname.split("/")[2];
      showGameMessage(this.gid, this.$Cookie.get("userid")).then((res) => {
        this.list = res.data.data;
        this.states = !res.data.data.cgState;
        if (res.data.data.giScore == 10) {
          this.xing = 5;
          this.nxing = 0;
        } else if (res.data.data.giScore >= 8) {
          this.xing = 4;
          this.nxing = 1;
        } else if (res.data.data.giScore >= 6) {
          this.xing = 3;
          this.nxing = 2;
        } else if (res.data.data.giScore >= 4) {
          this.xing = 2;
          this.nxing = 3;
        } else if (res.data.data.giScore >= 2) {
          this.xing = 1;
          this.nxing = 4;
        } else {
          this.xing = 0;
          this.nxing = 5;
        }
      });
    },

    changSou() {
      this.shou = this.list.cgState;
      if (
        this.$Cookie.get("userid") == null ||
        this.$Cookie.get("userid") == "null"
      ) {
        this.$confirm("您未登录是否进行登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login2");
          })
          .catch(() => {});
      } else {
        updatedShou(this.shou, this.gid, this.$Cookie.get("userid")).then(
          (res) => {
            if (!this.states) {
              this.$message("已取消收藏");
            } else {
              this.$message("收藏成功");
            }
            console.log(res);
            this.shou = !this.shou;
            this.states = !this.states;
            this.$emit("changList");
          }
        );
        // this.shou = !this.shou;
      }
    },
  },
};
</script>

<style>
.gameshow {
  flex: 1;
}
.showbox {
  width: 92%;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 0.1rem #adacac;
  padding-bottom: 0.2rem;
  margin-left: 8%;
  border-radius: 10px;
  overflow: hidden;
}

.showbox-top {
  width: 90%;
  text-align: center;
  padding: 0.15rem 0 0.1rem 0;
  border-bottom: 1px solid rgb(192, 192, 192);
  margin: 0 auto;
}

.showbox-top div:nth-child(1) {
  width: 0.7rem;
  height: 0.7rem;
  margin: 0 auto;
  margin-bottom: 0.05rem;
}

.showbox-top div:nth-child(1) img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.showbox-top div:nth-child(2) {
  font-size: 0.11rem;
  font-weight: bold;
  margin-bottom: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showbox-top div:nth-child(3) {
  font-size: 0.09rem;
  color: rgb(173, 173, 173);
}

.showbox-bottom {
  width: 90%;
  margin: 0 auto;
  padding-top: 0.1rem;
}

.showbox-bottom div:nth-child(1) {
  font-size: 0.095rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showbox-bottom div:nth-child(2) {
  display: flex;
  align-items: center;
  margin: 0.1rem 0 0.15rem 0;
}

.showbox-bottom div:nth-child(2) img {
  width: 0.12rem;
  height: 0.12rem;
}

.showbox-bottom div:nth-child(2) div {
  font-size: 0.095rem;
  margin-left: 0.05rem;
}

.showbox-bottom div:nth-child(3) span {
  font-size: 0.09rem;
  border: 1px solid rgb(185, 185, 185);
  padding: 0.02rem 0.03rem 0.02rem 0.03rem;
  border-radius: 5px;
  color: #adacac;
}

.showbox-bottom div:nth-child(4) {
  font-size: 0.12rem;
  margin-top: 0.2rem;
  text-align: center;
  background-color: rgb(35, 173, 229);
  cursor: pointer;
  color: #fff;
  padding: 0.05rem 0 0.05rem 0;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.showbox-bottom div:nth-child(4) img {
  width: 0.13rem;
  height: 0.13rem;
  margin-right: 0.05rem;
}
</style>